jQuery UI是一套JavaScript 函式库,提供抽象化、可自订主题的GUI控制项与动画效果。基于jQuery JavaScript函式库,可用来建构互动式的网际网路应用程式。在2007年9月约翰·雷西格于jquery.com部落格里的一篇文章里正式公诸于世[6]。最新的版本需要jQuery 2.1.1或更新的版本。[7]
功能
以1.9.0版本为例[8]。
- 拖曳(Draggable)–让元素可以用滑鼠拖曳。
- 拖放(Droppable)–让控制项可以接受其他拖曳进来的元素。
- 调整大小(Resizable)–让元素可以调整大小[9]。
- 选取(Selectable)–提供进阶的大量元素选择功能。
- 排序(Sortable)–让列表可以更容易排序。
jQuery UI的所有控制项都能自订主题样式[10]。
- 手风琴式选单(Accordion)–如手风琴般可伸缩的控制项。
- 自动完成(Autocomplete)–根据使用者的输入来自动完成文字栏。
- 按钮(Button)–增强按钮外观,将单选与复选控制项转变成按钮型式。
- 日期选择器(Datepicker)–进阶的日期选择工具。
- 对话框(Dialog) –在页面最上层显示对话框。
- 选单(Menu) - 显示多阶层式的选单。
- 进度条(Progressbar) –动态与静态的进度指示条。
- 滑动条(Slider)–完全可以自订的滑动条与各种功能[11]。
- 微调选择器(Spinner) - 上下控制的数字微调输入栏。
- 页签(Tabs)–页签切换控制项,可以内嵌或动态载入内容。
- 工具提示(Tooltip) - 弹出式提示框。
- 颜色动画(Color Animation)–产生颜色转变的动画效果。
- 切换Class、新增Class、移除Class、开关Class –让页面上元素样式转变时有动画效果。
- 效果(Effects)–各种效果(显示、下拉、爆炸、淡入等等)。
- 切换(Toggle)–切换效果开关。
- 隐藏、显示 - 使用上述的效果。
- 位置(Position) –根据另一个元素来设定目标元素的位置(对齐)。
范例
// 讓#draggable可以拖曳
$(function() {
$("#draggable").draggable();
});
<div id="draggable" style="width:150px;height:150px;padding:0.5em" class="ui-widget-content">
<p>Drag me around</p>
</div>
这段程式码会让使用者的滑鼠游标可以拖曳ID为“draggable”的DIV元素。
参考文献
外部链接
Wikiwand in your browser!
Seamless Wikipedia browsing. On steroids.
Every time you click a link to Wikipedia, Wiktionary or Wikiquote in your browser's search results, it will show the modern Wikiwand interface.
Wikiwand extension is a five stars, simple, with minimum permission required to keep your browsing private, safe and transparent.